<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	    <title>切换字体</title>
	    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
	    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
	    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
	    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
	    <link rel="stylesheet" href="../../static/css/skins.css">
	    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
	    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
	    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
	    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
	    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
	    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
	    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
	    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	    <script type="text/javascript" src="../../lib/layer/layer.min.js"></script>
	    <script type="text/javascript" src="../../static/js/MD5/Base64.js"></script>
	    <script type="text/javascript" src="../../static/js/MD5/md5.js"></script>
	    <script type="text/javascript" src="../../static/js/webApi.js"></script>
	    <style type="text/css">
	        /*
	            找到html标签、body标签，和挂载的标签
	            都给他们统一设置样式
	        */
	        html,
	        body,
	        #app,
	        .el-container {
	            /*设置内部填充为0，几个布局元素之间没有间距*/
	            padding: 0px;
	            /*外部间距也是如此设置*/
	            margin: 0px;
	            /*统一设置高度为100%*/
	            height: 100%;
	        }
	
	        .el-main {
	            padding: 4px;
	        }
			
			ul>li>a{
				text-decoration: none;
				color: #000000;
			}
	    </style>
	</head>
	<body>
		<ul class="list-unstyled clearfix">
			<li>
				<a href="" id="max" style="font-size: 16px;">大</a>
			</li>
			<li >
				<a href="" id="mod"  style="font-size: 14px;">中</a>
			</li>
			<li >
				<a href="" id="min"  style="font-size: 12px;">小(默认)</a>
			</li>
		</ul>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var changeFont=["skin-del","skin-max","skin-mod","skin-min"];
			var max=document.getElementById("max");
			var mod=document.getElementById("mod");
			var min=document.getElementById("min");
			
			max.addEventListener('click',function(){
				$.each(changeFont,function(i){
					parent.$("body").removeClass(changeFont[i]);
				});
				parent.$("body").addClass(changeFont[1]);
				allFrontSize="14px";
				window.localStorage.setItem("tableFontSize",allFrontSize);
			});
			mod.addEventListener('click',function(){
				$.each(changeFont,function(i){
					parent.$("body").removeClass(changeFont[i]);
				});
				parent.$("body").addClass(changeFont[2]);
				allFrontSize="13px";
				window.localStorage.setItem("tableFontSize",allFrontSize);
			});
			min.addEventListener('click',function(){
				$.each(changeFont,function(i){
					parent.$("body").removeClass(changeFont[i]);
				});
				parent.$("body").addClass(changeFont[3]);
				allFrontSize="12px";
				window.localStorage.setItem("tableFontSize",allFrontSize);
			});
			
		}
		
	</script>
	
</html>
